<!DOCTYPE HTML>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport"
		content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,aItemress=no">
	<title>选择品牌</title>
	<link rel="stylesheet" type="text/css" href="../css/aui.css" />
	<link rel="stylesheet" type="text/css" href="../css/app.css" />
	<link rel="stylesheet" type="text/css" href="../css/vant.css" />
	<style type="text/css">
		body {
			background: #fff;
		}

		.indexText {
			/* width: 100%;
				border-bottom:0.01rem solid #EDEDED;
				font-size:0.7rem;
				font-family:PingFangSC-Regular,PingFang SC;
				font-weight:400;
				color:rgba(47,49,52,1);
				margin-left:-0.75rem
				 */
		}

		.indexBar {
			padding: 0;
			width: 100%;

		}

		.img {
			width: 0.7rem;
			height: 0.5rem;
			display: none;
			float: right;
			margin-right: 0rem;
			margin-top: 0.3rem;
		}



		.text_list {
			background-color: #fff;
			width: 100% !important;

		}

		.indexBar .van-cell {
			width: 100%;
			padding: 0.5rem 0;
			position: relative;
			z-index: -2;

			/* border-bottom: 0.05rem solid #ebedf0 !important; */
		}

		.indexBar .van-cell::after {
			position: absolute;
			box-sizing: border-box;
			content: ' ';
			pointer-events: none;
			right: 0px;
			bottom: 0;
			left: 0px;
			border-bottom: 1px solid #ebedf0;
			-webkit-transform: scaleY(0.5);
			transform: scaleY(0.5);
		}

		/* .indexBar .van-cell:last-child{background:red} */


		.bd {
			height: 0.5rem;
			background: #F8F8F8;
			margin: 0 -0.75rem;
			margin-top:-1px;

		}
	</style>
</head>

<body>
	<div id="app">
		<!-- <van-index-bar class="indexBar" :sticky="false" highlight-color="#AE853A">
			  <van-index-anchor v-for="(item,index) in brandList" :key="index" :index="item.list">
					<span class="indexWord">{{item.first_letter}}</span>
					<van-cell v-for="(citem,cindex) in item.list"
						:key="citem.id"
						:title="citem.name" />
				</van-index-anchor>
			</van-index-bar> -->
		<div class="wrapper">


			<!-- <van-index-bar>
				<van-index-anchor class="indexBar" v-for="(item,index) in brandList" :key="index"
					:index="item.first_letter" />
				<div class="" v-for="(citem,cindex) in item.list" @click="onClick(citem.id)" v-on="clasName(citem.name)"
					style="" class="text_list">
					<span class="indexWord">{{item.first_letter}}</span>
					<van-cell class="indexText" :key="cindex" :id="cindex" :title="citem.name" />
					<img src="../image/btn/choose.png" class="img" v-if="index_id==citem.id" style="display:block">
					<img src="../image/btn/choose.png" class="img" v-else style="display:none">
				</div>
			</van-index-bar> -->

			<!-- <van-index-bar>
			  <van-index-anchor v-for="(item,index) in brandList" :key="index" :index="item.first_letter" />
				<span class="indexWord">{{item.first_letter}}</span>
				<van-cell class="indexText" v-for="(citem,cindex) in item.list"
					:key="citem.id"
					:title="citem.name"/>
			</van-index-bar> -->



			<van-index-bar>

				<van-index-anchor class="indexBar" v-for="(item,index) in brandList" :key="index"
					:index="item.first_letter" />
				<span class="indexWord">{{item.first_letter}}</span>
				<div class="" v-for="(citem,cindex) in item.list" @click="currentValue(citem)" style=""
					class="text_list">
					<van-cell class="indexText" :key="cindex" :id="cindex" :title="citem.name" />
					<img src="../image/btn/choose.png" class="img" v-if="index_id==citem.id" style="display:block">
					<img src="../image/btn/choose.png" class="img" v-else style="display:none">
				</div>
				<div class="bd"></div>
			</van-index-bar>

		</div>
	</div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/vue.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript" src="../script/vant.min.js"></script>
<script>
	var vm = new Vue({
		el: "#app",
		data: {
			id: 0,
			brandList: [],
			choose_type: false,
			style: 'none',
			index_id: '',
			name: '',
		},
		methods: {
			// 获取品牌数据
			get_choose: function () {
				get_data('api/Good/goodDetails', {
					good_id: vm.id
				}, function (ret) {
					// alert(JSON.stringify(ret,null,2))
					if (ret.status) {
						// alert(JSON.stringify(ret.data.brand))
						vm.brandList = ret.data.brand
						// vm.type = ret.data.page
						// alert(JSON.stringify(vm.goodSku.good_sku))
					}
				}, false)
			},
			currentValue(vo) {
        // alert(JSON.stringify(vo,null,2))
				vm.index_id = vo.id;
				if (vm.index_id != '') {
					vm.choose_type = true
					vm.style = 'block'

				} else {
					vm.choose_type = false
					vm.style = 'none'

				}
				send_event('choose_brand_f', {
					data: vo
				})
			}

		},
	})
	apiready = function () {
		$api.rmStorage('cloose_name')
		vm.id = $api.getStorage('choose_id');
		vm.get_choose();
	}
	function onClick(id) {
		console.log(id)
		vm.index_id = id;
		if (vm.index_id != '') {
			vm.choose_type = true
			vm.style = 'block'

		} else {
			vm.choose_type = false
			vm.style = 'none'

		}

		// open_win('sel_sku_goods', 'sel_sku_goods', false)
	}
	function clasName(name) {
		vm.name = name
		$api.setStorage('cloose_name', name);

	}
</script>

</html>
